<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
        	1. 两边固定, 中间自适应
        	2. 当中列要完整显示
        	3. 当中列要优先加载
       -->
       
       <!--
       	浮动: 搭建完整的布局结构
       	margin 为赋值: 调整旁边两列的位置, 使三列布局到一行上
       	使用相对定位: 调整旁边两列的位置, 使两列位置调整到两头
       -->
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			body{
				min-width: 600px;
			}
			.header, .footer{
				height: 100px;
				background: yellow;
			}
			.content{
				padding: 0 200px;
			}
			.left{
				position: relative;
				left: -200px;
				float:left;
				margin-left: -100%;
				width: 200px;
				height: 200px;
				background-color: pink;
			}
			.middle{
				float: left;
				width: 100%;
				height: 200px;
				background-color: deeppink;
			}
			.right{
				position: relative;
				right: -200px;
				float: left;
				margin-left: -200px;
				width: 200px;
				height: 200px;
				background-color: pink;
			}
			.clearfix{
				*zoom: 1;
			}
			.clearfix:after{
				content: "";
				display: block;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="header">header</div>
		<div class="content clearfix">
			<div class="middle">middle</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
		<div class="footer">footer</div>
	</body>
</html>
